<template>
	<view>
		<!-- 顶部导航 -->
		<view class="top-nav">
			<text class="jiantou" @click="navigateShop"></text>
			<text class="tab active">商品评价 ({{ reviews }})</text>
		</view>

		<!-- 评分概览 -->
		<view class="rating-summary">
			<text class="recommend" @click="navigateToShop">综合评分</text>
			<view class="average-score">
				<text class="score">{{ averageScore }}</text>
				<view class="stars">
					<image v-for="index in 5" :key="index"
						:src="index <= Math.round(averageScore) ? filledStar : emptyStar" class="star" />
				</view>
			</view>
		</view>

		<!-- 评论列表 -->
		<scroll-view class="review-list">
			<view v-for="(review, index) in reviewCount" :key="index" class="review-item">
				<view class="review-header">
					<image :src="review.profilePrcture" class="avatar" />
					<text class="name">{{ review.username }}</text>
					<view class="stars">
						<image v-for="index in 5" :key="index" :src="index <= review.score ? filledStar : emptyStar"
							class="star" />
					</view>
				</view>
				<view class="comment">{{ review.reviewText }}</view>
				<image :src="review.image" class="review-image" v-if="review.image" />
				<view class="date">{{ review.date }}</view>
				<view v-for="(review, index) in review.sonReviewsList" :key="index" class="review">
					<view class="review-header">
						<image :src="review.profilePrcture" class="avatar" />
						<text class="name">{{ review.username }}</text>
						<view class="stars">
							<image v-for="index in 5" :key="index" :src="index <= review.score ? filledStar : emptyStar"
								class="star" />
						</view>
					</view>
					<view class="comment">{{ review.reviewText }}</view>
					<image :src="review.image" class="review-image" v-if="review.image" />
					<view class="date">{{ review.date }}</view>
				</view>
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reviewCount: [],
				filledStar: '/static/star-filled.png',
				emptyStar: '/static/star-empty.png',
				reviews: null,
				productId: null,
				averageScore:0
			};
		},
		onLoad(e) {
			this.productId = e.productId;
			this.fetchReviewsCount();
			this.fetchReviews();
		},
		methods: {
			fetchReviewsCount() {
				this.request("/productReviews/getParentReviews", "get", {
						productId: this.productId
					})
					.then((res) => {
							this.reviewCount = res.data.result;
					})
					.catch((err) => {
						console.error(err);
					});
			},
			fetchReviews() {
				this.request("/productReviews/getParentReviewsCount", "get", {
						productId: this.productId
					}).then((res) => {
						if (res.data.message=="操作成功！") {
							this.reviews = res.data.result;
						}
					})
					.catch((err) => {
						console.error(err);
					});
			},
			navigateShop() {
				uni.navigateTo({
					url: `/pages/Productdetails/ProductDetails?productId=${this.productId}`
				});
			},
		}
	};
</script>

<style scoped>
	.review{
		/* background-color: aqua; */
		margin: 10px 60px;
	}
	.jiantou::before {
		font-family: "iconfont" !important;
		content: "\e64e";
		font-size: 50rpx;
		color: black;
	}

	.top-nav {
		display: flex;
		justify-content: space-around;
		padding: 10px 0;
		border-bottom: 1px solid #ddd;
	}

	.tab {
		font-size: 16px;
		color: #333;
	}

	.tab.active {
		font-weight: bold;
		color: #ff0000;
	}

	.rating-summary {
		padding: 20px;
		border-bottom: 1px solid #ddd;
	}

	.recommend {
		font-size: 14px;
		color: #ff0000;
		margin-bottom: 10px;
	}

	.average-score {
		display: flex;
		align-items: center;
	}

	.score {
		font-size: 2em;
		color: red;
		margin-right: 10px;
	}

	.stars {
		display: flex;
	}

	.star {
		width: 20px;
		height: 20px;
	}

	.review-list {
		padding: 0 20px;
	}

	.review-item {
		border-bottom: 1px solid #ddd;
		padding: 10px 0;
	}

	.review-header {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.name {
		font-weight: bold;
		margin-left: 10px;
	}

	.comment {
		margin: 16px 20px;
	}

	.review-image {
		width: 100%;
		height: auto;
	}

	.date {
		color: #999;
		font-size: 12px;
	}
</style>
